require(['../config'],()=>{
    require(['template','footer'],(template)=>{
        class Index {
            constructor(){
                this.render().then(()=>{
                    this.addEvents()
                    this.checksChange()
                    this.allElection()
                    this.allChecksChange()
                    this.goMoney()
                    this.reduce()
                    this.delete()
                    this.user()
                    this.tuiChu()
                })
                
            }

            render(){
                return new Promise(resolve=>{
                    $.get('http://rap2api.taobao.org/app/mock/239068/cart',resp=>{
                        if(resp.code == 200){
                            this.resp = resp.body.list
                            this.cart = JSON.parse(localStorage.getItem('cart'))
                            if(this.cart.length>0){
                                $('.cartNone').hide()
                                $('.toMoney').show()
                                this.template()
                                resolve()
                            }
                        }
                    })
                    
                   
                })
                
            }


            template(){
                let str = template('temp1',{ list: this.cart})
                $('#shop').html(str)

                let str2 = template('temp2',{ list: this.resp})
                $('#listShop').html(str2)

            }

            addEvents(){     //添加商品数量
                const that = this
                $('.add').on('click', function(){
                    const id = Number($(this).parents('.list').attr('data-id'))
                    that.cart = that.cart.map(shop=>{
                        if(shop.id === id){
                            shop.count ++
                            $(this).siblings('input').val(shop.count)    
                            $(this).parents('.num').next().children('span').text(shop.count * shop.price)                           
                        }
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(that.cart))
                    that.goMoney()
                })

            }

            reduce(){    //减少商品数量
                const that = this
                $('.reduce').on('click', function(){
                    const id = Number($(this).parents('.list').attr('data-id'))
                    that.cart = that.cart.map(shop=>{
                        if(shop.id === id){
                            if(shop.count == 1){
                                shop.count = 1
                                $(this).siblings('input').val(shop.count)  
                                $(this).parents('.num').next().children('span').text(shop.count * shop.price)                           
                                
                            }else{
                                shop.count --
                                $(this).siblings('input').val(shop.count)  
                                $(this).parents('.num').next().children('span').text(shop.count * shop.price)                           

                            }
                                                     
                        }
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(that.cart))
                    that.goMoney()

                })
            }



            checksChange(){      //商品复选框状态改变事件
                const that = this
                $('.img input:checkbox').on('change',function (){
                    let id = Number($(this).parents('.list').attr('data-id'))
                    that.cart = that.cart.map(shop=>{
                        if(shop.id === id){
                            shop.checked = $(this).prop('checked')
                        }
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(that.cart))   
                    that.goMoney()
                    that.allElection()

                })
                
            }

            allElection(){      //全选的状态根据商品的复选框状态来确定
                const isAll = this.cart.every(shop=> shop.checked)
                $('#allElection').prop('checked',isAll)
            } 


            allChecksChange(){   //全选的点击事件
                const that = this
                $('#allElection').on('click',function () {      //让所有的商品复选框的状态根据全选的状态来确定
                    that.cart = that.cart.map(shop=>{
                        shop.checked = $(this).prop('checked')
                        return shop
                    })
                    localStorage.setItem('cart',JSON.stringify(that.cart))  
                    $('.img input:checkbox').prop('checked',$(this).prop('checked'))   //不能重新渲染，手动改变每个商品里的复选框状态
                    that.goMoney()

                })

            }

            goMoney(){     //计算总计
                let money = this.cart.reduce((num,shop)=>{
                    if(shop.checked){
                        num +=shop.price*shop.count
                    }
                    return num
                },0)
                $('#goMoney').html(money)
            }

            goCart(){
                const that = this
                $('.goCart').on('click',function () {
                    const id = Number($(this).attr('data-id'))
                    that.resp = that.resp.map((shop,index)=>{
                        if(shop.id == id){
                            console.log([shop])
                            let cart = JSON.parse(localStorage.getItem('cart'))      //先取出在push到一个数组里，然后重新再存
                            cart.push([shop])
                            localStorage.setItem('cart',JSON.stringify(cart))  
                        }
                        return shop
                    }) 
                    that.render
                })
            }



            delete(){     //删除商品
                const that = this
                $('.delete').on('click',function(){
                    const id = Number($(this).parents('.list').attr('data-id'))
                    that.cart = that.cart.filter(shop=>{
                        shop.checked = false
                        return shop.id != id
                    })
                    localStorage.setItem('cart',JSON.stringify(that.cart))
                    that.goMoney()
                    $(this).parents('.list').next('.line').remove()
                    $(this).parents('.list').remove()

                    if(that.cart.length == 0){
                        $('.toMoney').hide()
                        $('.cartNone').show()
                        $('#allElection').attr('checked','false')
                    }
                })                    
            }
            

            user () {
                const user = JSON.parse(localStorage.getItem('user'))
                if(user){
                    let name = ''
                      user.map(item=>{
                          name = item.name
                          return item
                      })
                    $('.user , .msg').hide()
                    $('.users').show().children('#name').html(name)

                }
            }
    
            tuiChu() {
                console.log(111)
                $('.tuiChu').on('click',function(){
                    console.log(222)
                    $('.user, .msg').show()
                    $('.users').hide().children('#name').html('')
                })
            }

        }

        new Index()
    })
})